<!-- // 悬浮按钮组件 -->
<template>
  <div v-show="isShow" style="position:relative;">
    <div class="button-box" draggable="false">
      <i class="ifont icon-ictotop font-top-style" @click="backtop"></i>

      <span :class="{ 'dianhua-text': showText }">
        <i class="ifont icon-dianhua font-dianhua-style"></i>
        18931135132
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      showText: true
    };
  },
  mounted() {
    window.addEventListener("scroll", this.showbtn, true);
  },
  methods: {
    a() {
      console.log(23);
    },
    openBox() {
      console.log("双击");
    },
    showbtn() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 500) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    backtop() {
      let timer = setInterval(function() {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 10);
    }
  }
};
</script>

<style scoped>
.button-box {
  position: fixed;
  bottom: 0;
  right: -7.8rem;
  cursor: pointer;
  z-index: 888;
  margin: 0.1rem 0;
}
.none {
  display: none;
}

.font-top-style {
  display: block;
  text-align: center;
  background: #6a6878;
  color: white;
  width: 2.78rem;
  height: 2.78rem;
  line-height: 2.78rem;
  font-size: 1.3rem;
  opacity: 0.3;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.font-dianhua-style {
  display: inline-block;
  text-align: center;
  background: #6a6878;
  color: white;
  width: 2.78rem;
  height: 2.78rem;
  line-height: 2.78rem;
  font-size: 1.3rem;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.dianhua-text {
  display: inline-block;
  background: #6a6878;
  color: white;
  padding: 0 1rem 0 0;
  font-weight: 400;
  opacity: 0.3;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.dianhua-text:hover {
  transform: translateX(-7.7rem);
  opacity: 1;
}

.phone-text:hover,
.font-top-style:hover,
.button-box:hover {
  color: white;
  opacity: 1;
}
@media all and (max-width: 991px) {
  .button-box {
    border-radius: 50%;
    position: fixed;
    bottom: 0;
    right: -7.8rem;
    cursor: pointer;
    z-index: 888;
    margin: 0.1rem 0;
  }
  .none {
    display: none;
  }

  .font-top-style {
    display: block;
    text-align: center;
    background: #6a6878;
    color: white;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 2rem;
    opacity: 0.3;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
  }
  .font-dianhua-style {
    display: inline-block;
    text-align: center;
    background: #6a6878;
    color: white;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 2rem;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
  }
  .dianhua-text {
    display: inline-block;
    background: #6a6878;
    color: white;
    padding: 0 1rem 0 0;
    font-weight: 400;
    opacity: 0.3;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
  }
  .dianhua-text:hover {
    transform: translateX(-7.7rem);
    opacity: 1;
  }

  .phone-text:hover,
  .font-top-style:hover,
  .button-box:hover {
    color: white;
    opacity: 1;
  }
}
</style>
